<template>
  <div>
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="right-section">
            <div class="dashboard-buttons">
              <a
                type="text"
                class="dashboard-btn"
                @click="$router.push('/dashBoard')"
                v-show="$route.path !== '/dashBoard'"
              >
                驾驶舱
              </a>
              <a
                type="text"
                class="dashboard-btn"
                @click="$router.push('/home')"
                v-show="$route.path === '/dashBoard'"
              >
                主页
              </a>
            </div>
            <div class="logo">
              <el-dropdown class="user-dropdown" @command="handleCommand">
                <div class="dropdown-trigger">
                  <img
                    src="@/assets/visitor.png"
                    class="user-avatar"
                    alt="User"
                  />
                  <span class="visitor-text">{{ username }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="登录" v-if="username == '游客'"
                    >登录</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="退出"
                    v-else-if="username != '游客'"
                    >退出</el-dropdown-item
                  >
                  <el-dropdown-item command="注册" v-if="username == '游客'"
                    >注册</el-dropdown-item
                  >
                  <el-dropdown-item command="借书列表" v-if="username != '游客'"
                    >借书列表</el-dropdown-item
                  >
                  <el-dropdown-item command="待还列表" v-if="username != '游客'"
                    >待还列表</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" v-if="isManager">
          <el-row>
            <el-col>
              <el-menu
                default-active="/home"
                class="el-menu-vertical-demo"
                @select="handleSelect"
                :collapse="isCollapse"
              >
                <el-menu-item index="/home">
                  <i class="el-icon-menu"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/bookList">
                  <i class="el-icon-document"></i>
                  <span slot="title">图书管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { jwtDecode } from "jwt-decode";

export default {
  name: "myContainer",
  data() {
    return {
      isManager: false,
      username: localStorage.getItem("username") || "游客",
      isCollapse: false,
      screenWidth: 0, // 存储当前屏幕宽度
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      const { permissions } = jwtDecode(localStorage.getItem("token"));
      console.log(permissions);
      if (permissions.includes("manager")) {
        this.isManager = true;
      } else {
        this.isManager = false;
      }
    } else {
      this.isManager = false;
    }
  },
  mounted() {
    // 初始化时获取屏幕宽度
    this.screenWidth = window.innerWidth;
    this.checkCollapse();

    // 监听窗口大小变化
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
      this.checkCollapse();
    },
    checkCollapse() {
      // 当屏幕宽度小于 768px 时折叠菜单
      this.isCollapse = this.screenWidth < 768;
    },
    handleCommand(command) {
      if (command === "登录") {
        this.$router.push("/login");
      } else if (command === "注册") {
        this.$router.push("/register");
      } else if (command === "退出") {
        localStorage.removeItem("token");
        localStorage.removeItem("username");
        this.$router.push("/login");
      } else if (command === "借书列表") {
        this.$router.push("/borrowInfo/all");
      } else if (command === "待还列表") {
        this.$router.push("/borrowInfo/waiting");
      }
    },
    handleSelect(item) {
      this.$router.push(item);
    },
  },
};
</script>

<style scoped>
.el-header {
  padding: 0;
}

.header-content {
  background: linear-gradient(to right, #f5f5f5, #f5f5f5);
  height: 50px;
  display: flex;
  justify-content: flex-end; /* 整体右对齐 */
  align-items: center;
  padding: 0 20px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 15px; /* 按钮和 logo 之间的间距 */
}

.dashboard-buttons {
  display: flex;
  align-items: center;
  gap: 15px; /* 按钮之间的间距 */
}
.dashboard-btn {
  font-size: 14px;
  color: #606266;
}

.dashboard-btn:hover {
  color: #409eff;
  cursor: pointer;
}

.logo {
  background: linear-gradient(to right, #f5f5f5, #f5f5f5);
  height: 50px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dcdfe6;
}

.visitor-text {
  font-size: 14px;
  color: #606266;
}

/* Hover effect for the entire trigger area */
.dropdown-trigger:hover {
  color: #409eff;
}

/* Dropdown arrow styling */
.el-icon-arrow-down {
  font-size: 12px;
  color: #c0c4cc;
  transition: transform 0.3s;
}

.user-dropdown:hover .el-icon-arrow-down {
  color: #409eff;
  transform: rotate(180deg);
}
</style>
